<template>
	<div class="site-wrapper site-page--login">
		<div class="site-content__wrapper">
			<div class="site-content">
				<div class="brand-info">
					<h2 class="brand-info__text">机台管理</h2>
					<p class="brand-info__intro">后台管理</p>
				</div>
				<div class="login-main">
					
					<div v-show="flag1"> 
						<h3 class="login-title">管理员登录</h3>
						<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
							<el-form-item prop="userName">
								<el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
							</el-form-item>
							<el-form-item prop="password">
								<el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
							</el-form-item>
							<el-form-item prop="captcha">
								<el-row :gutter="20">
									<el-col :span="14">
										<el-input v-model="dataForm.captcha" placeholder="验证码">
										</el-input>
									</el-col>
									<el-col :span="10" class="login-captcha">
										<img :src="captchaPath" @click="getCaptcha()" alt="">
									</el-col>
								</el-row>
							</el-form-item>
							<el-form-item>
								<el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()"  >登录</el-button>
								<el-button class="login-btn-submit" type="primary" @click="reg()"  >注册</el-button>
							</el-form-item>
						</el-form>
					</div>
					

					<div v-show="flag2">
						<h3 class="login-title">注册</h3>
						<el-form :model="dataForm2" :rules="dataRule" ref="dataForm2" @keyup.enter.native="register()" status-icon>
							<el-form-item prop="userName">
								<el-input v-model="dataForm2.userName" placeholder="账号"></el-input>
							</el-form-item>
							<el-form-item prop="password">
								<el-input v-model="dataForm2.password" type="password" placeholder="密码"></el-input>
							</el-form-item>
							<el-form-item prop="factoryName">
								<el-input v-model="dataForm2.factoryName" placeholder="工厂名称(机台管理管理员填写)"></el-input>
							</el-form-item>
							<el-form-item prop="jianjie">
								<el-input v-model="dataForm2.jianjie" placeholder="简介(机台管理管理员填写)"></el-input>
							</el-form-item>
							<el-form-item prop="fuzeren">
								<el-input v-model="dataForm2.fuzeren" placeholder="负责人(机台管理管理员填写)"></el-input>
							</el-form-item>
							<el-form-item prop="phone">
								<el-input v-model="dataForm2.phone" placeholder="手机(机台管理管理员填写)"></el-input>
							</el-form-item>
							
							 <el-form-item label="角色">
							    <el-radio-group v-model="dataForm2.role">
							      <el-radio label="1" >机台管理管理员</el-radio>
							      <el-radio label="2" >经销商</el-radio>
							    </el-radio-group>
							  </el-form-item>

							
							<el-form-item>
								<el-button class="login-btn-submit" type="primary" @click="login()"  >登录</el-button>
								<el-button class="login-btn-submit" type="primary" @click="register()">注册</el-button>
							</el-form-item>
						</el-form>
					</div>
					
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	import {
		getUUID
	} from '@/utils'
	export default {
		data() {
			return {
				flag1: true,
				flag2: false,
				dataForm: {
					userName: '',
					password: '',
					uuid: '',
					captcha: ''
				},
				dataForm2: {},
				dataRule: {
					userName: [{
						required: true,
						message: '帐号不能为空',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '密码不能为空',
						trigger: 'blur'
					}],
					captcha: [{
						required: true,
						message: '验证码不能为空',
						trigger: 'blur'
					}]
				},
				captchaPath: ''
			}
		},
		created() {
			this.getCaptcha()
		},
		methods: {
			login(){
				this.flag1=true;
				this.flag2=false;
			},
			reg(){
				this.flag1=false;
				this.flag2=true;
			},
			// 提交表单
			dataFormSubmit() {
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						this.$http({
							url: this.$http.adornUrl('/sys/login'),
							method: 'post',
							data: this.$http.adornData({
								'username': this.dataForm.userName,
								'password': this.dataForm.password,
								'uuid': this.dataForm.uuid,
								'captcha': this.dataForm.captcha
							})
						}).then(({
							data
						}) => {
							if (data && data.code === 0) {
								this.$cookie.set('token', data.token)
								this.$router.replace({
									name: 'home'
								})
							} else {
								this.getCaptcha()
								this.$message.error(data.msg)
							}
						})
					}
				})
			},
			register() {
				console.log(this.dataForm2.role)
				let arr=[]
				arr.push(this.dataForm2.role)
				this.$refs['dataForm2'].validate((valid) => {
					if (valid) {
						this.$http({
							url: this.$http.adornUrl('/sys/user/save'),
							method: 'post',
							data: this.$http.adornData({
								'username': this.dataForm2.userName,
								'password': this.dataForm2.password,
								'status': '1',
								'roleIdList':arr,
								'factoryName':this.dataForm2.factoryName,
								'jianjie':this.dataForm2.jianjie,
								'fuzeren':this.dataForm2.fuzeren,
								'phone':this.dataForm2.phone,
								
							})
						}).then(({
							data
						}) => {
							if (data && data.code === 0) {
								this.$message.success('注册成功')
							} else {
								this.getCaptcha()
								this.$message.error(data.msg)
							}
						})
					}
				})
			
			},
			// 获取验证码
			getCaptcha() {
				this.dataForm.uuid = getUUID()
				this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.dataForm.uuid}`)
			}
		}
	}
</script>

<style lang="scss">
	.site-wrapper.site-page--login {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(38, 50, 56, .6);
		overflow: hidden;

		&:before {
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 100%;
			content: "";
			background-image: url(~@/assets/img/login_bg.jpg);
			background-size: cover;
		}

		.site-content__wrapper {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			padding: 0;
			margin: 0;
			overflow-x: hidden;
			overflow-y: auto;
			background-color: transparent;
		}

		.site-content {
			min-height: 100%;
			padding: 30px 500px 30px 30px;
		}

		.brand-info {
			margin: 220px 100px 0 90px;
			color: #fff;
		}

		.brand-info__text {
			margin: 0 0 22px 0;
			font-size: 48px;
			font-weight: 400;
			text-transform: uppercase;
		}

		.brand-info__intro {
			margin: 10px 0;
			font-size: 16px;
			line-height: 1.58;
			opacity: .6;
		}

		.login-main {
			position: absolute;
			top: 0;
			right: 0;
			padding: 150px 60px 180px;
			width: 470px;
			min-height: 100%;
			background-color: #fff;
		}

		.login-title {
			font-size: 16px;
		}

		.login-captcha {
			overflow: hidden;

			>img {
				width: 100%;
				cursor: pointer;
			}
		}

		.login-btn-submit {
			width: 40%;
			margin-top: 38px;
		}
	}
</style>
